<template>
  <div class="MeContent">
    <div class="beforeContent">
      <img src="../../static/image/aa.jpg" alt="">
      <router-link to="/sign" class="login">{{names}}</router-link>
      <span>个人主页></span>
    </div>
    <div class="Contents">
      <div class="item">
        <span class="cryin">1</span>
        <span>创作中心</span>
      </div>
      <div class="item">
        <span class="cryin">7</span>
        <span>关注</span>
      </div>
      <div class="item">
        <span class="cryin">1</span>
        <span>收藏夹</span>
      </div>
      <div class="item">
        <span class="cryin">15</span>
        <span>最近浏览</span>
      </div>
    </div>
  </div>
</template>

<script>
import Bus from "../../bus"
export default {
  name: "MeContent",
  data(){
    return{
      names:'未登陆',
    }
  },
}
</script>

<style scoped>
a {
  text-decoration: none;
  color: #3e3e3e;
}
.router-link-active {
  text-decoration: none;
}
.card{
  border: 1px #ccc solid;
}
.MeContent{
  position: fixed;
  top: 70px;
}
.beforeContent{
  height: 110px;
  text-align: center;
  line-height: 110px;
}
.beforeContent .login{
  position: relative;
  top: -40px;
  font-weight: bold;

}
.beforeContent span:nth-child(3){
  position: relative;
   top: -40px;
   color: #8b8a8a;
  right:-200px;
 }
.beforeContent img{
  border-radius: 50%;
  height: 100px;
  width: 100px;
}
.Contents {
  opacity:1;
  height: 100px;
  line-height: 50px;
  position: fixed;
  display: flex;
  justify-items: center;
  width: 100%;
}

.Contents .item{
  flex: 1;
  text-align: center;
  font-size: 16px;
  border-right:1px solid #e0e0e0;
}
.Contents .item .cryin{
  font-size: 20px;
  display: block;
  height: 30px;
}
</style>